<template>
    <div>
        <my-form-drawer :title="title" :width="500" :visible="visible" :layout="layout" @ok="save" @cancel="onClose">
            <a-form-model
                    ref="ruleForm"
                    :model="form"
                    :rules="rules">
                <a-form-model-item label="组织名称" prop="name">
                    <a-input v-model="form.name" />
                </a-form-model-item>
                <a-form-model-item label="上级组织" prop="superior">
                    <my-tree-select :tree-data="treeSelectData"></my-tree-select>
                </a-form-model-item>
                <a-form-model-item label="地区" prop="region">
                    <area-select
                            @change="selectArea"
                            :default-value="form.areaCode"
                    />
                    <a-textarea v-model="form.remark" allow-clear />
                </a-form-model-item>
                <a-form-model-item label="地址" prop="address">
                    <a-textarea v-model="form.address" allow-clear />
                </a-form-model-item>
            </a-form-model>
        </my-form-drawer>
    </div>
</template>

<script>
    import MyFormDrawer from '@/components/drawer/MyFormDrawer'
    import myTreeSelect from '../components/myTreeSelect'
    import areaSelect from '../components/areaSelect'
    export default {
        name: "orgStrutureForm",
        components: {MyFormDrawer,myTreeSelect,areaSelect},
        props: {
            visible: {
                type: Boolean,
                required: false,
                default: false
            },
        },
        data(){
            return{
                title:'新增组织',
                layout:'vertical',
                treeSelectData:[
                    {
                        title: 'Node1',
                        value: '0-0',
                        key: '0-0',
                        children: [
                            {
                                value: '0-0-1',
                                key: '0-0-1',
                                scopedSlots: {
                                    // custom title
                                    title: 'title',
                                },
                            },
                            {
                                title: 'Child Node2',
                                value: '0-0-2',
                                key: '0-0-2',
                            },
                        ],
                    },
                    {
                        title: 'Node2',
                        value: '0-1',
                        key: '0-1',
                    },
                ],
                form: {
                    name:'',
                    superior:'',
                    region:'',
                    areaCode:['32','3205','320571'],
                    address:'',
                },
                rules:{
                    name: [
                        { required: true, message: '名称不能为空', trigger: 'blur' },
                    ],
                    superior: [{ required: true, message: '上级不能为空', trigger: 'blur' },]
                },
            }
        },
        methods:{
            onClose() {
                this.$refs.ruleForm.clearValidate()
                this.$refs.ruleForm.resetFields()
                this.$emit('closeAddForm',false)
            },
            //选择地区之后的回调
            selectArea(selectedArea) {
                console.log(selectedArea);
            },
            save(){
                this.$refs.ruleForm.validate(valid =>{
                    if(!valid){
                        return false
                    }
                    if(valid){
                        // add(this.form).then( res => {
                        //     console.log(res);
                        //     if(res.data.code === 0){
                        //         this.$message.success('添加成功')
                        //         this.onClose()
                        //     }
                        // })
                    }
                })
            }
        },
    }
</script>

<style scoped>

</style>
